/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div>
    <div class="item-title">
      <div class="subject">
        <h3>SEO设置</h3>
        <h5>商城各级页面搜索引擎优化设置选项</h5>
      </div>
    </div>
    <div
      id="explanation"
      class="explanation"
      style="color: rgb(85, 85, 85); background-color: rgb(243, 244, 244); width: 98%; height: 100%;"
    >
      <div class="bckopa-tips">
        <div class="title">
          <img src="@/static/images/handd.png" alt />
          <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
        </div>
        <ul>
          <li>插入的变量必需包括花括号“{}”，当应用范围不支持该变量时，该变量将不会在前台显示(变量后边的分隔符也不会显示)，留空为系统默认设置，SEO自定义支持手写。以下是可用SEO变量：</li>
          <li>站点名称 {sitename}，（应用范围：全站）</li>
          <li>名称 {name}，（应用范围：抢购名称、商品名称、品牌名称、文章标题、分类名称）</li>
          <li>文章分类名称 {article_class}，（应用范围：文章分类页）</li>
          <li>店铺名称 {shopname}，（应用范围：店铺页）</li>
          <li>关键词 {key}，（应用范围：商品关键词、文章关键词、店铺关键词）</li>
          <li>简单描述 {description}，（应用范围：商品描述、文章摘要、店铺关键词）</li>
        </ul>
      </div>
      <span title="收起提示" id="explanationZoom" style="display: block;"></span>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="首页" name="home">
        <h1>首页</h1>
        <hr />
        <el-form ref="form" :model="formIndex" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formIndex.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formIndex.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formIndex.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="formSubmit([formIndex])" :loading="isLoading">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="抢购" name="flash">
        <h1>抢购</h1>
        <hr />
        <el-form ref="form" :model="formFlash" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formFlash.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formFlash.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formFlash.description"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <h1>抢购内容</h1>
        <hr />
        <el-form ref="form" :model="formFlashContent" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formFlashContent.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formFlashContent.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formFlashContent.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="formSubmit([formFlash, formFlashContent])"
              :loading="isLoading"
            >保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="品牌" name="third">
        <h1>品牌</h1>
        <hr />
        <el-form ref="form" :model="formBrand" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formBrand.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formBrand.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formBrand.description"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <h1>某一品牌商品列表</h1>
        <hr />
        <el-form ref="form" :model="formBrandList" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formBrandList.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formBrandList.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formBrandList.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="formSubmit([formBrand, formBrandList])"
              :loading="isLoading"
            >保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="拼团" name="fourth">
        <h1>拼团</h1>
        <hr />
        <el-form ref="form" :model="formGroup" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formGroup.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formGroup.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formGroup.description"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <h1>拼团内容</h1>
        <hr />
        <el-form ref="form" :model="formGroupContent" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formGroupContent.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formGroupContent.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formGroupContent.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="formSubmit([formGroup, formGroupContent])"
              :loading="isLoading"
            >保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="积分中心" name="1">
        <h1>积分中心</h1>
        <hr />
        <el-form ref="form" :model="formIntegralMall" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formIntegralMall.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formIntegralMall.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formIntegralMall.description"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <h1>积分中心商品内容</h1>
        <hr />
        <el-form ref="form" :model="formPointContent" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formPointContent.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formPointContent.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formPointContent.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="formSubmit([formIntegralMall, formPointContent])"
              :loading="isLoading"
            >保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="文章" name="2">
        <h1>文章分类列表</h1>
        <hr />
        <el-form ref="form" :model="formArticle" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formArticle.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formArticle.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formArticle.description"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <h1>文章内容</h1>
        <hr />
        <el-form ref="form" :model="formArticleContent" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formArticleContent.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formArticleContent.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formArticleContent.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="formSubmit([formArticle, formArticleContent])"
              :loading="isLoading"
            >保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="店铺" name="3">
        <h1>店铺</h1>
        <hr />
        <el-form ref="form" :model="formShop" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formShop.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formShop.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formShop.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="formSubmit([formShop])" :loading="isLoading">保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="商品" name="4">
        <h1>商品详情</h1>
        <hr />
        <el-form ref="form" :model="formGoodsInfo" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formGoodsInfo.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formGoodsInfo.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formGoodsInfo.description"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <h1>商品列表</h1>
        <hr />
        <el-form ref="form" :model="formGoodsList" label-width="150px">
          <el-form-item label="title">
            <el-input v-model="formGoodsList.title" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="keywords">
            <el-input v-model="formGoodsList.keywords" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="description">
            <el-input
              type="textarea"
              style="width:300px"
              v-model="formGoodsList.description"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="formSubmit([formGoodsInfo, formGoodsList])"
              :loading="isLoading"
            >保 存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "home",
      formIndex: {},
      formFlash: {},
      formFlashContent: {},
      formBrand: {},
      formBrandList: {},
      formGroup: {},
      formGroupContent: {},
      formIntegralMall: {},
      formPointContent: {},
      formArticle: {},
      formArticleContent: {},
      formShop: {},
      formGoodsInfo: {},
      formGoodsList: {},
      isLoading: false
    };
  },
  created() {
    this.getSEOSet();
  },
  methods: {
    getSEOSet() {
      var that = this;
      this.request.get("/mall/seo/list").then(function(res) {
        res.forEach(e => {
          if (e.type == "index") {
            that.formIndex = e;
          }
          if (e.type == "flash") {
            that.formFlash = e;
          }
          if (e.type == "flash_content") {
            that.formFlashContent = e;
          }
          if (e.type == "brand") {
            that.formBrand = e;
          }
          if (e.type == "brand_list") {
            that.formBrandList = e;
          }
          if (e.type == "group") {
            that.formGroup = e;
          }
          if (e.type == "group_content") {
            that.formGroupContent = e;
          }
          if (e.type == "integralMall") {
            that.formIntegralMall = e;
          }
          if (e.type == "point_content") {
            that.formPointContent = e;
          }
          if (e.type == "article") {
            that.formArticle = e;
          }
          if (e.type == "article_content") {
            that.formArticleContent = e;
          }
          if (e.type == "shop") {
            that.formShop = e;
          }
          if (e.type == "goodsInfo") {
            that.formGoodsInfo = e;
          }
          if (e.type == "goodsList") {
            that.formGoodsList = e;
          }
        });
      });
    },
    formSubmit(forms) {
      this.isLoading = true;
      var that = this;
      this.request.put("mall/seo", forms).then(function(res) {
        if (res.status == 1) {
          that.$message.success("保存成功");
        } else {
          that.$message.error(res.msg);
        }
        that.isLoading = false;
      });
    }
  }
};
</script>

<style scoped>
>>> .el-input__inner {
  width: 300px;
}
</style>
